<script setup>
function displaymovielist(){
const list=document.getElementById("movie-list")
list.style.display="block"
}

function hiddenmovielist(){
const list=document.getElementById("movie-list")
list.style.display="none"
}
</script>

<template>
    <!-- 当el-container在外面时候所有子元素水平排布,当里面还有el-footer  -->
    <!-- 或el-header时候竖着排布 -->
    <el-container style="left:35%;position: absolute;">
      <!-- 导航栏 -->
      <el-header>
        <!-- 搜索栏 -->
       <el-container style="width: 500px;">
        <el-input id="sel" >
        </el-input>
        <el-button @click="hiddenmovielist()">取消</el-button>
        <el-icon style="position: absolute;margin-top: 5px;color: burlywood;" size="20px"><Search /></el-icon>
       </el-container>
      <!-- 下拉菜单 -->
     
    <span class="el-dropdown-link" @mousemove="displaymovielist()" >
    影片
      <el-icon class="el-icon--right">
        <arrow-down />
      </el-icon>
    </span>
    <span class="el-dropdown-link" @mousemove="displaymovielist()" >
    默认排序
      <el-icon class="el-icon--right">
        <arrow-down />
      </el-icon>
    </span>
    <span class="el-dropdown-link" @mousemove="displaymovielist()" >
    全部频道
      <el-icon class="el-icon--right">
        <arrow-down />
      </el-icon>
    </span>
    <div id="movie-list" style="display: none;width: 500px;height: 200px;background-color: black;color: white;">
      <el-button class="tab">僵尸世界大战</el-button>
      <el-button class="tab">蝙蝠侠</el-button>
      <el-button class="tab">海上钢琴师</el-button>
      <el-button class="tab">海上钢琴师</el-button>
      <el-button class="tab">海上钢琴师</el-button>
      <el-button class="tab">海上钢琴师</el-button>
      <el-button class="tab">海上钢琴师</el-button>
      <el-button class="tab">海上钢琴师</el-button>  
    </div>
      </el-header>
<el-main>
  
</el-main>

    </el-container>


</template>
<style>
.tab{
  background-color: rgb(70, 66, 66);
  color: white;
  border: none;
  margin-top: 8px ;
}

</style>